<template>
	<view class="container user-register yuan-form">
		<view class="page-main">
			<view class="pange-panel">
				<view class="yuan-form-list">
					<view class="yuan-form-label yuan-label-must">当前选择身份:</view>
					<text class="yuan-input">{{formData.userType}}</text>
				</view>
			</view>
			<view class="pange-panel">
				<view class="yuan-form-list">
					<view class="yuan-form-label yuan-label-must">手机号:</view>
					<input class="yuan-input" v-model="formData.phone" placeholder="请输入手机号"
						placeholder-class="placeholder-style">
				</view>
				<view class="yuan-form-list">
					<view class="yuan-form-label yuan-label-must">密码:</view>
					<input class="yuan-input" v-model="formData.password" type="password" placeholder="请输入密码"
						placeholder-class="placeholder-style">
				</view>
				<view class="yuan-form-list">
					<view class="yuan-form-label yuan-label-must">二次确认:</view>
					<input class="yuan-input" v-model="formData.surePassword" type="password" placeholder="请再次输入密码"
						placeholder-class="placeholder-style">
				</view>
				<template v-if="formData.userType==='个人'">
					<view class="yuan-form-list">
						<view class="yuan-form-label yuan-label-must">姓名:</view>
						<input class="yuan-input" v-model="formData.name" placeholder="请输入姓名"
							placeholder-class="placeholder-style">
					</view>
					<view class="yuan-form-list">
						<view class="yuan-form-label yuan-label-must">选择性别:</view>
						<picker class="yuan-input" mode="selector" :range="genderArr" @change="genderArrChange">
							<view>
								<view class="picker-input" v-if="formData.gender">
									{{formData.gender}}
								</view>
								<view class="picker-input placeholder-style" v-else>选择性别</view>
							</view>

						</picker>
						<view class="list-ico iconfont">&#xe775;</view>
					</view>
					<view class="yuan-form-list">
						<view class="yuan-form-label yuan-label-must">所在企业:</view>
						<input class="yuan-input" v-model="formData.placeEnterprise" placeholder="请输入所在企业"
							placeholder-class="placeholder-style">
						<view class="list-ico iconfont">&#xe775;</view>
					</view>
					<view class="yuan-form-list">
						<view class="yuan-form-label yuan-label-must">身份证号:</view>
						<input class="yuan-input" v-model="formData.identityCard" placeholder="请输入身份证号"
							placeholder-class="placeholder-style">
						<view class="list-ico iconfont">&#xe775;</view>
					</view>

					<view class="yuan-form-list header-list">
						<view class="yuan-form-label">头像:</view>
						<view class="flex-grow"></view>
						<view class="list-header header-def" v-if="!formData.headPortrait && !selHeadInfo"
							@click="editPhoto">点击更换</view>
						<view class="list-header" v-else-if="selHeadInfo">
							<image class="header-img" :src="selHeadInfo" mode="aspectFit" @click="editPhoto">
							</image>
						</view>
						<view class="list-header" v-else-if="formData.headPortrait">
							<image class="header-img" :src="$resFileUrl+formData.headPortrait" mode="aspectFit"
								@click="editPhoto">
							</image>
						</view>
					</view>
					<view class="yuan-form-row">
						<view class="yuan-form-label">简介:</view>
						<textarea class="yuan-textarea" v-model="formData.briefIntroduction" placeholder="请输入个人简介"
							placeholder-class="placeholder-style" :maxlength="500" />
					</view>
					<view class="yuan-form-list">
						<view class="yuan-form-label yuan-label-must">所在地区:</view>
						<picker class="yuan-input" mode="multiSelector" @columnchange="bindMultiPickerColumnChange"
							:value="multiIndex" :range="multiArray" range-key="label" @change="bindMultiPickerChange">
							<view class="picker-input" v-if="selAddr">{{selAddr}}</view>
							<view class="picker-input placeholder-style" v-else>请选择你的地区</view>
						</picker>
						<view class="list-ico iconfont">&#xe775;</view>
					</view>
				</template>

				<template v-else-if="formData.userType==='企业/单位'">
					<view class="yuan-form-list">
						<view class="yuan-form-label yuan-label-must">企业/单位名称:</view>
						<input class="yuan-input" v-model="formData.name" placeholder="请输入企业/单位名称"
							placeholder-class="placeholder-style">
					</view>
					<view class="yuan-form-list">
						<view class="yuan-form-label yuan-label-must">成立日期:</view>
						<picker class="yuan-input" mode="date" :end="$format(new Date(),'yyyy-MM-dd')"
							@change="dateOfEstablishmentChange">
							<view class="yx-input picker-input" v-if="formData.dateOfEstablishment">
								{{formData.dateOfEstablishment}}
							</view>
							<view class="yx-input picker-input placeholder-style" v-else>请选择成立日期</view>
						</picker>
						<view class="list-ico iconfont">&#xe775;</view>
					</view>
					<view class="yuan-form-list">
						<view class="yuan-form-label yuan-label-must">信用代码:</view>
						<input class="yuan-input" v-model="formData.creditCode" placeholder="请输入信用代码"
							placeholder-class="placeholder-style">
					</view>
					<view class="yuan-form-list">
						<view class="yuan-form-label yuan-label-must">法定代表人:</view>
						<input class="yuan-input" v-model="formData.legalRepresentative" placeholder="请输入法定代表人"
							placeholder-class="placeholder-style">
					</view>
					<view class="yuan-form-list header-list">
						<view class="yuan-form-label">头像:</view>
						<view class="flex-grow"></view>
						<view class="list-header header-def" v-if="!formData.headPortrait && !selHeadInfo"
							@click="editPhoto">选择图片</view>
						<view class="list-header" v-else-if="selHeadInfo">
							<image class="header-img" :src="selHeadInfo" mode="aspectFit" @click="editPhoto">
							</image>
						</view>
						<view class="list-header" v-else-if="formData.headPortrait">
							<image class="header-img" :src="$resFileUrl+formData.headPortrait" mode="aspectFit"
								@click="editPhoto">
							</image>
						</view>
					</view>

					<view class="yuan-form-list header-list">
						<view class="yuan-form-label yuan-label-must">营业执照:</view>
						<view class="flex-grow"></view>
						<view class="list-img header-def" v-if="!formData.businessLicense && !selBusinessLicense"
							@click="editBusinessLicense">选择图片</view>
						<view class="list-img" v-else-if="selBusinessLicense">
							<image class="photo-img" :src="selBusinessLicense" mode="aspectFit"
								@click="editBusinessLicense">
							</image>
						</view>
						<view class="list-img" v-else-if="formData.businessLicense">
							<image class="photo-img" :src="$resFileUrl+formData.businessLicense" mode="aspectFit"
								@click="editBusinessLicense">
							</image>
						</view>
					</view>
					<view class="yuan-form-list">
						<view class="yuan-form-label yuan-label-must">所在地区:</view>
						<picker class="yuan-input" mode="multiSelector" @columnchange="bindMultiPickerColumnChange"
							:value="multiIndex" :range="multiArray" range-key="label" @change="bindMultiPickerChange">
							<view class="picker-input" v-if="selAddr">{{selAddr}}</view>
							<view class="picker-input placeholder-style" v-else>请选择你的地区</view>
						</picker>
						<view class="list-ico iconfont">&#xe775;</view>
					</view>
				</template>
				<template v-else-if="formData.userType==='专家'">
					<view class="yuan-form-list">
						<view class="yuan-form-label yuan-label-must">姓名:</view>
						<input class="yuan-input" v-model="formData.name" placeholder="请输入姓名"
							placeholder-class="placeholder-style">
					</view>
					<view class="yuan-form-list">
						<view class="yuan-form-label yuan-label-must">选择性别:</view>
						<picker class="yuan-input" mode="selector" :range="genderArr" @change="genderArrChange">
							<view>
								<view class="picker-input" v-if="formData.gender">
									{{formData.gender}}
								</view>
								<view class="picker-input placeholder-style" v-else>选择性别</view>
							</view>

						</picker>
						<view class="list-ico iconfont">&#xe775;</view>
					</view>
					<view class="yuan-form-list">
						<view class="yuan-form-label">邮箱:</view>
						<input class="yuan-input" v-model="formData.email" placeholder="请输入邮箱"
							placeholder-class="placeholder-style">
					</view>

					<view class="yuan-form-list" @click="showCheckPanel('placeCollege')">
						<view class="yuan-form-label yuan-label-must">所属学院:</view>
						<view class="yuan-input no-warp" v-if="formData.placeCollege">
							{{formData.placeCollege.join(',')}}
						</view>
						<view class="yuan-input placeholder-style" v-else>请选择学院</view>

						<view class="list-ico iconfont">&#xe775;</view>
					</view>
					<view class="yuan-form-list" @click="showCheckPanel('territory')">
						<view class="yuan-form-label yuan-label-must">领域:</view>
						<view class="yuan-input no-warp" v-if="formData.territory">{{formData.territory.join(',')}}
						</view>
						<view class="yuan-input placeholder-style" v-else>请选择领域</view>

						<view class="list-ico iconfont">&#xe775;</view>
					</view>
					<view class="yuan-form-list header-list">
						<view class="yuan-form-label">头像:</view>
						<view class="flex-grow"></view>
						<view class="list-header header-def" v-if="!formData.headPortrait && !selHeadInfo"
							@click="editPhoto">点击更换</view>
						<view class="list-header" v-else-if="selHeadInfo">
							<image class="header-img" :src="selHeadInfo" mode="aspectFit" @click="editPhoto">
							</image>
						</view>
						<view class="list-header" v-else-if="formData.headPortrait">
							<image class="header-img" :src="$resFileUrl+formData.headPortrait" mode="aspectFit"
								@click="editPhoto">
							</image>
						</view>
					</view>
					<view class="yuan-form-row">
						<view class="yuan-form-label">简介:</view>
						<textarea class="yuan-textarea" v-model="formData.briefIntroduction" placeholder="请输入个人简介"
							placeholder-class="placeholder-style" :maxlength="500" />
					</view>
					<view class="yuan-form-row">
						<view class="yuan-form-label">相关图片:</view>
						<UploadVue @imgChange="correlationPictureChange" />
					</view>
					<view class="yuan-form-row">
						<view class="yuan-form-label yuan-label-must">难点突破:</view>
						<textarea class="yuan-textarea" v-model="formData.difficultyBreakThrough" placeholder="请输入难点突破"
							placeholder-class="placeholder-style" :maxlength="500" />
					</view>
					<view class="yuan-form-row">
						<view class="yuan-form-label yuan-label-must">核心技术:</view>
						<textarea class="yuan-textarea" v-model="formData.coreTechnology" placeholder="请输入核心技术"
							placeholder-class="placeholder-style" :maxlength="500" />
					</view>
					<view class="yuan-form-row">
						<view class="yuan-form-label yuan-label-must">推广应用:</view>
						<textarea class="yuan-textarea" v-model="formData.promotionUse" placeholder="请输入推广应用"
							placeholder-class="placeholder-style" :maxlength="500" />
					</view>
				</template>
				<template v-else-if="formData.userType==='专家团队'">
					<view class="yuan-form-list">
						<view class="yuan-form-label yuan-label-must">团队名称:</view>
						<input class="yuan-input" v-model="formData.name" placeholder="请输入团队名称"
							placeholder-class="placeholder-style">
					</view>
					<view class="yuan-form-list">
						<view class="yuan-form-label yuan-label-must">团队负责人:</view>
						<input class="yuan-input" v-model="formData.teamPrincipal" placeholder="请输入团队负责人"
							placeholder-class="placeholder-style">
					</view>
					<view class="yuan-form-list">
						<view class="yuan-form-label">联系方式:</view>
						<input class="yuan-input" v-model="formData.contactWay" placeholder="请输入联系方式"
							placeholder-class="placeholder-style">
					</view>
					<view class="yuan-form-list">
						<view class="yuan-form-label">邮箱:</view>
						<input class="yuan-input" v-model="formData.email" placeholder="请输入邮箱"
							placeholder-class="placeholder-style">
					</view>
					<view class="yuan-form-list" @click="showCheckPanel('placeCollege')">
						<view class="yuan-form-label yuan-label-must">所属学院:</view>
						<view class="yuan-input no-warp" v-if="formData.placeCollege">
							{{formData.placeCollege.join(',')}}
						</view>
						<view class="yuan-input placeholder-style" v-else>请选择学院</view>

						<view class="list-ico iconfont">&#xe775;</view>
					</view>
					<view class="yuan-form-list" @click="showCheckPanel('territory')">
						<view class="yuan-form-label yuan-label-must">领域:</view>
						<view class="yuan-input no-warp" v-if="formData.territory">{{formData.territory.join(',')}}
						</view>
						<view class="yuan-input placeholder-style" v-else>请选择领域</view>

						<view class="list-ico iconfont">&#xe775;</view>
					</view>

					<view class="yuan-form-row">
						<view class="yuan-form-label yuan-label-must">团队负责人简介:</view>
						<textarea class="yuan-textarea" v-model="formData.briefIntroduction" placeholder="请输入团队负责人简介"
							placeholder-class="placeholder-style" :maxlength="500" />
					</view>
					<view class="yuan-form-row">
						<view class="yuan-form-label">相关图片:</view>
						<UploadVue @imgChange="correlationPictureChange" />
					</view>
					<view class="yuan-form-row">
						<view class="yuan-form-label yuan-label-must">难点突破:</view>
						<textarea class="yuan-textarea" v-model="formData.difficultyBreakThrough" placeholder="请输入难点突破"
							placeholder-class="placeholder-style" :maxlength="500" />
					</view>
					<view class="yuan-form-row">
						<view class="yuan-form-label yuan-label-must">核心技术:</view>
						<textarea class="yuan-textarea" v-model="formData.coreTechnology" placeholder="请输入核心技术"
							placeholder-class="placeholder-style" :maxlength="500" />
					</view>
					<view class="yuan-form-row">
						<view class="yuan-form-label yuan-label-must">推广应用:</view>
						<textarea class="yuan-textarea" v-model="formData.promotionUse" placeholder="请输入推广应用"
							placeholder-class="placeholder-style" :maxlength="500" />
					</view>

				</template>

			</view>
		</view>


		<view class="bottom-btn-box">
			<view class="yuan-btn btn-primary bottom-btn" @click="clickSave">保存信息</view>
		</view>
		<view class="checkbox-parent" :class="checkBoxVisible&&'checkbox-parent-show'">
			<view class="checkbox-panel">
				<view class="checkbox-top">
					<view class="checkbox-btn" @click="checkBoxVisible=false">取消</view>
					<view class="checkbox-btn c-primary" @click="checkBoxSure">确定</view>
				</view>
				<view class="checkbox-list-parent">
					<checkbox-group @change="checkboxChange">
						<label class="checkbox-list" v-for="(item,idx) in showCheckBoxArr" :key="item+'_'+idx">
							<view>
								<checkbox :value="item" style="transform:scale(0.8)"
									:checked="checkBoxDefault.indexOf(item)>=0" />
							</view>
							<view class="no-warp">{{item}}</view>
						</label>
					</checkbox-group>
				</view>

			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from "vue";
	import { chooseImage, hideLoading, showLoading, showToast, uploadFile } from "@/common/util";
	import commonStore from "@/store/commonStore";
	import areaJson, { getAreaWords } from "@/common/area";
	import UploadVue from "@/components/upload.vue"
	import api from "@/common/api";
	let formData = ref<any>({})
	const clickSave = async () => {
		if (!formData.value.phone) {
			showToast('请输入手机号')
			return
		}
		if (!formData.value.password) {
			showToast('请输入密码')
			return
		}
		if (!formData.value.surePassword) {
			showToast('请输入密码')
			return
		}
		if (formData.value.password !== formData.value.surePassword) {
			showToast("两次输入的密码不一致");
			return;
		}
		if (formData.value.userType === '个人') {
			if (!formData.value.name) {
				showToast('请输入姓名')
				return
			}
			if (!formData.value.gender) {
				showToast('请选择性别')
				return
			}
			if (!formData.value.placeAreaCode) {
				showToast('请选择所在城市')
				return
			}
		} else if (formData.value.userType === '企业/单位') {
			if (!formData.value.name) {
				showToast('请输入企业/单位名')
				return
			}
			if (!formData.value.dateOfEstablishment) {
				showToast('请选择成立日期')
				return
			}
			if (!formData.value.creditCode) {
				showToast('请输入信用代码')
				return
			}
			if (!formData.value.legalRepresentative) {
				showToast('请输入法定代表人')
				return
			}
			if (!formData.value.businessLicense) {
				showToast('请上传营业执照')
				return
			}
			if (!formData.value.placeAreaCode) {
				showToast('请选择所在城市')
				return
			}
		} else if (formData.value.userType === '专家') {
			if (!formData.value.name) {
				showToast('请输入姓名')
				return
			}
			if (!formData.value.gender) {
				showToast('请选择性别')
				return
			}
			if (!formData.value.placeCollege) {
				showToast('请输入所属学院')
				return
			}
			if (!formData.value.territory) {
				showToast('请选择领域')
				return
			}
			if (!formData.value.difficultyBreakThrough) {
				showToast('请输入难点突破')
				return
			}
			if (!formData.value.coreTechnology) {
				showToast('请输入核心技术')
				return
			}
			if (!formData.value.promotionUse) {
				showToast('请输入推广应用')
				return
			}
			if (!formData.value.difficultyBreakThrough) {
				showToast('请输入难点突破')
				return
			}
			if (!formData.value.coreTechnology) {
				showToast('请输入核心技术')
				return
			}
			if (!formData.value.promotionUse) {
				showToast('请输入推广应用')
				return
			}
		} else if (formData.value.userType === '专家团队') {
			if (!formData.value.name) {
				showToast('请输入团队名称')
				return
			}
			if (!formData.value.placeCollege) {
				showToast('请输入所属学院')
				return
			}
			if (!formData.value.territory) {
				showToast('请选择领域')
				return
			}
			if (!formData.value.briefIntroduction) {
				showToast('请输入团队负责人简介')
				return
			}
			if (!formData.value.difficultyBreakThrough) {
				showToast('请输入难点突破')
				return
			}
			if (!formData.value.coreTechnology) {
				showToast('请输入核心技术')
				return
			}
			if (!formData.value.promotionUse) {
				showToast('请输入推广应用')
				return
			}
		}


		showLoading()
		if (selHeadInfo.value) {
			const fileRes : any = await uploadFile(selHeadInfo.value)
			const data : any = JSON.parse(fileRes.data)
			formData.value.headPortrait=data.msg
		} else {
			formData.value.headPortrait=null
		}
		
		try {
			const res = await api.userRegister({
				...formData.value,
				hasTechnicalRepresentative:null
			});
			showToast("注册成功,请等待后台人员审核");
			formData.value={}
			uni.navigateBack()
		} finally {
			hideLoading()
		}
	}
	onMounted(() => {
		formData.value = commonStore.state.registerData
		showLoading()
		Promise.all([getTerritoryList(), getPlaceCollegeList()]).then(() => {
			hideLoading()
		});
		provinceCity()
	})
	const selHeadInfo = ref('')
	const editPhoto = () => {
		chooseImage((res) => {
			selHeadInfo.value = res.tempFilePaths[0] + ''
		})

	}

	const genderArr = reactive(['男', '女'])
	const genderArrChange = (e : any) => {
		formData.value.gender = genderArr[e.detail.value]
	}

	let addrList : any[] = []
	let multiArray = reactive([])
	const provinceCity = async () => {
		addrList = areaJson
		const children = addrList[0].children
		multiArray[0] = addrList
		multiArray[1] = children ? children : [addrList[0]]
		const nextChildren = multiArray[1][0].children
		multiArray[2] = nextChildren ? nextChildren : [multiArray[1][0]]
	}
	const selAddr = ref('')
	const multiIndex = reactive([0, 0, 0])

	const bindMultiPickerChange = () => {
		formData.value.placeCity = getAreaWords(multiArray);
		selAddr.value = multiArray[0][multiIndex[0]].label + ',' + multiArray[1][multiIndex[1]].label + ',' + multiArray[2][multiIndex[2]].label
	}
	const bindMultiPickerColumnChange = (e : any) => {
		multiIndex[e.detail.column] = e.detail.value
		const key = multiIndex[0]
		const nextKey = multiIndex[1]
		switch (e.detail.column) {
			case 0: //拖动第1列

				multiArray[1] = addrList[key].children ? addrList[key].children : [addrList[key]]
				multiIndex[1] = 0


				multiArray[2] = multiArray[1][nextKey].children ? multiArray[1][nextKey].children : [multiArray[1][nextKey]]
				multiIndex[2] = 0

				break
			case 1: //拖动第2列
				multiArray[2] = multiArray[1][nextKey].children ? multiArray[1][nextKey].children : [multiArray[1][nextKey]]
				multiIndex[2] = 0
				break
		}
	}


	const dateOfEstablishmentChange = (e : any) => {
		formData.value.dateOfEstablishment = e.detail.value + ''
	}


	const selBusinessLicense = ref('')
	const editBusinessLicense = () => {
		chooseImage((res) => {
			selBusinessLicense.value = res.tempFilePaths[0] + ''
		})

	}

	const checkBoxValue = ref([])
	const checkBoxDefault = ref([])
	const checkBoxVisible = ref(false)
	const showCheckBoxArr = ref([])
	const showCheckBoxKey = ref('')
	const checkboxChange = (e) => {
		checkBoxValue.value = e.detail.value
	}
	const showCheckPanel = (key : string) => {
		showCheckBoxKey.value = key
		if (key === 'placeCollege') {
			showCheckBoxArr.value = placeCollegeList.map(item => item.content)
			checkBoxVisible.value = true
			checkBoxDefault.value = formData.value.placeCollege ? [...formData.value.placeCollege] : []
		} else if (key === 'territory') {
			showCheckBoxArr.value = territoryList.map(item => item.content)
			checkBoxVisible.value = true
			checkBoxDefault.value = formData.value.territory ? [...formData.value.territory] : []
		}
	}
	const checkBoxSure = () => {
		checkBoxVisible.value = false
		if (showCheckBoxKey.value === 'placeCollege') {
			formData.value.placeCollege = [...checkBoxValue.value]
		} else if (showCheckBoxKey.value === 'territory') {
			formData.value.territory = [...checkBoxValue.value]
		}
		console.info(formData.value)
	}

	const correlationPictureChange = (imgList : string[]) => {
		formData.value.correlationPicture = imgList
	}

	let territoryList = [];
	const getTerritoryList = async () => {
		try {
			const res = await api.getSetting("3");
			territoryList = res.data;
		} finally {
			//this.formLoading = false;
		}
	}
	let placeCollegeList = [];
	const getPlaceCollegeList = async () => {
		try {
			const res = await api.getSetting("1");
			placeCollegeList = res.data;
		} finally {
			//this.formLoading = false;
		}
	}
</script>

<style lang="scss">
	.user-register {
		padding-bottom: 120rpx;

		.pange-panel {
			background-color: #fff;
			box-shadow: 0px 8rpx 12rpx 0px rgba(0, 0, 0, 0.08);
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			padding: 0 15rpx;
		}

		.page-main {
			padding: 30rpx;
		}

		.header-list {
			height: 180rpx;
		}

		.list-header {
			height: 120rpx;
			width: 120rpx;
			border-radius: 120rpx;
			border: solid 1px #eee
		}

		.list-img {
			height: 120rpx;
			width: 160rpx;
			border-radius: 8rpx;
			border: solid 1px #eee
		}

		.header-def {
			background-color: #F9F9F9;
			font-size: 24rpx;
			text-align: center;
			line-height: 120rpx;
		}

		.photo-img {
			width: 100%;
			height: 100%;
			display: block;
			border-radius: 8rpx;
		}

		.header-img {
			width: 100%;
			height: 100%;
			display: block;
			border-radius: 120rpx;
		}

		.bottom-btn-box {
			width: 680rpx;
			margin: 0 auto;
			margin-top: 20px;
		}

		.bottom-btn {
			height: 88rpx;
			border-radius: 88rpx;
			margin-bottom: 30rpx;
		}

		.checkbox-parent {
			position: fixed;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background-color: rgba(0, 0, 0, 0.5);
			transform: translateX(-9999px);
			z-index: 999;
		}

		.checkbox-parent-show {
			transform: translateX(0);

			.checkbox-panel {
				transform: translateY(0);
			}
		}

		.checkbox-panel {
			background-color: #fff;
			border-radius: 10rpx;
			height: 45%;
			width: 100%;
			margin: 0 auto;
			position: absolute;
			bottom: 0;
			transform: translateY(100%);
			transition: all 0.3s;
			display: flex;
			flex-direction: column;
		}

		.checkbox-list-parent {
			padding: 30rpx;
			flex-grow: 1;
			height: 10vh;
			overflow: auto;
			padding-bottom: 100rpx;
		}

		.checkbox-top {
			border-bottom: solid 1px #eee;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 80rpx;
			flex-shrink: 0;
		}

		.checkbox-btn {
			padding: 5rpx 30rpx;
		}

		.checkbox-list {
			display: inline-flex;
			align-items: center;
			width: 50%;
			margin-bottom: 10rpx;
			font-size: 28rpx;
		}

	}
</style>